<template>
	<view>
		<cu-custom bgColor="bg-cyan" isBack>
			<block slot="content">input输入框</block>
		</cu-custom>
		<view class="smart-panel-head">
			<view class="smart-panel-head-title">
				input输入框
				</view>
				</view>
				<view class="smart-padding-wrap">
					<view class="item">可自动聚焦的input</view>
									<input class="smart-input" focus="true" placeholder="自动获得焦点" />
									<view class="item">键盘右下角按钮显示为搜索</view>
									<input class="smart-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
									<view class="item">控制最大输入长度的input</view>
									<input class="smart-input" maxlength="10" placeholder="最大输入长度为10" />
									<view class="item">同步获取输入值：{{inputValue}}</view>
									<input class="smart-input" @input="onKeyInput" placeholder="输入同步到view中" />
									<view class="item">数字输入的input</view>
									<input class="smart-input" type="number" placeholder="这是一个数字输入框" />
									<view class="item">密码输入的input</view>
									<input class="smart-input" password type="text" placeholder="这是一个密码输入框" />
									<view class="item">带小数点的input</view>
									<input class="smart-input" type="digit" placeholder="带小数点的数字键盘" />
									<view class="item">身份证输入的input</view>
									<input class="smart-input" type="idcard" placeholder="身份证输入键盘" />
								<view class="item">带清除按钮</view>
								<view class="wrapper">
									<input class="smart-input" :value="clearinputValue" @input="clearInput" placeholder="这是一个带清除按钮的输入框">
									<text v-if="showClearicon" @class="uni-icon">&#xe434</text>
								</view>
							</view>
						</view>
</template>

<script>
	export default{
			data(){
				return{
					inputValue:"",
					showClearIcon:false,
					clearinputValue:""
				}
			},
			methods:{
				onKeyInput(event){
					console.log(event.detail.value);
					this.inputValue = event.detail.value
				},
				clearInput(event){
					this.clearinputValue= event.detail.value;
					if(event.detail.value.length>0) this.showClearIcon=true;
				},
				clearIcon(e){
					this.clearinputValue = "";
					this.showClearIcon= false;
				}
			}
		}
</script>

<style>
</style>